<!-- 添加成员按钮 -->
<div class="flex justify-between items-center mb-4">
    <h3 class="text-lg font-medium text-gray-900">项目成员</h3>
    <button id="add-member-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition" data-project-id="{{ project_id }}">
        <i class="fas fa-plus mr-2"></i>添加成员
    </button>
</div>

<div class="overflow-x-auto">
    <table id="members-table" class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    成员
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    角色
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    部门
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    职位
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    加入时间
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                </th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            {% set role_count = project_roles|length %}
            {% for role in project_roles %}
            <tr>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm font-medium text-gray-900">{{ role.user.name }}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                        {% if role.role == '项目经理' %}bg-purple-100 text-purple-800
                        {% elif role.role == '开发人员' %}bg-blue-100 text-blue-800
                        {% elif role.role == '测试人员' %}bg-green-100 text-green-800
                        {% elif role.role == '设计人员' %}bg-yellow-100 text-yellow-800
                        {% else %}bg-gray-100 text-gray-800{% endif %}">
                        {{ role.role }}
                    </span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ role.department or '未设置' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ role.position or '未设置' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ role.created_at.strftime('%Y-%m-%d') }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                        <button class="edit-member text-indigo-600 hover:text-indigo-900" 
                                data-id="{{ role.id }}" 
                                data-user-id="{{ role.user.id }}" 
                                data-user-name="{{ role.user.name }}" 
                                data-role="{{ role.role }}" 
                                data-department="{{ role.department or '' }}" 
                                data-position="{{ role.position or '' }}"
                                style="pointer-events: auto !important; cursor: pointer !important; z-index: 999 !important; position: relative !important;">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="remove-member text-red-600 hover:text-red-900" 
                                data-id="{{ role.id }}" 
                                data-user-id="{{ role.user.id }}" 
                                data-user-name="{{ role.user.name }}"
                                style="pointer-events: auto !important; cursor: pointer !important; z-index: 999 !important; position: relative !important;">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">
                    暂无成员
                </td>
            </tr>
            {% endfor %}
            
            <!-- 添加空行占位符，确保每页显示10行 -->
            {% if role_count < 10 %}
                {% for i in range(role_count, 10) %}
                <tr class="empty-row">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        &nbsp;
                    </td>
                </tr>
                {% endfor %}
            {% endif %}
        </tbody>
    </table>
</div>

<!-- 分页控件 -->
<div id="members-pagination" class="sticky bottom-0 bg-white border-t border-gray-200 px-4 py-3 sm:px-6 mt-4">
    <div class="flex flex-1 justify-between sm:hidden">
        <a href="javascript:void(0);" 
           class="members-pagination-link relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not project_roles_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ project_roles_pagination.prev_num }}">
            上一页
        </a>
        <a href="javascript:void(0);" 
           class="members-pagination-link relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not project_roles_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ project_roles_pagination.next_num }}">
            下一页
        </a>
    </div>
    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ (project_roles_pagination.page - 1) * project_roles_pagination.per_page + 1 }}</span> 至 
                <span class="font-medium">{{ project_roles_pagination.page * project_roles_pagination.per_page if project_roles_pagination.page * project_roles_pagination.per_page < project_roles_pagination.total else project_roles_pagination.total }}</span> 条，
                共 <span class="font-medium">{{ project_roles_pagination.total }}</span> 条结果
            </p>
        </div>
        <div>
            <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                <a href="javascript:void(0);" 
                   class="members-pagination-link relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not project_roles_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ project_roles_pagination.prev_num }}">
                    <span class="sr-only">上一页</span>
                    <i class="fas fa-chevron-left h-5 w-5" aria-hidden="true"></i>
                </a>
                
                <!-- 页码按钮 -->
                {% for p in project_roles_pagination.iter_pages() %}
                    {% if p %}
                        {% if p != project_roles_pagination.page %}
                            <a href="javascript:void(0);" 
                               class="members-pagination-link relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                               data-page="{{ p }}">
                                {{ p }}
                            </a>
                        {% else %}
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold bg-primary text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                                {{ p }}
                            </span>
                        {% endif %}
                    {% else %}
                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}
                
                <a href="javascript:void(0);" 
                   class="members-pagination-link relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not project_roles_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ project_roles_pagination.next_num }}">
                    <span class="sr-only">下一页</span>
                    <i class="fas fa-chevron-right h-5 w-5" aria-hidden="true"></i>
                </a>
            </nav>
        </div>
    </div>
</div>

<!-- 添加成员模态框 -->
<div id="add-member-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg p-6 w-11/12 md:w-2/3 lg:w-2/5 xl:w-1/3 mx-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">添加项目成员</h3>
            <button type="button" id="close-add-member-modal" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form id="add-member-form" action="/project_members/add" method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="project_id" value="{{ project_id }}">
            <input type="hidden" name="members_page" value="{{ members_page or 1 }}">
            
            <div class="mb-4">
                <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">用户</label>
                <div class="relative">
                    <div class="flex">
                        <input type="text" id="user-search" placeholder="搜索用户..." 
                               class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-primary focus:border-primary">
                        <button type="button" id="clear-user-search" class="px-3 py-2 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md hover:bg-gray-200 hidden" title="清除选择">
                            <i class="fas fa-times text-gray-500"></i>
                        </button>
                    </div>
                    <div id="user-search-results" class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg hidden max-h-60 overflow-y-auto"></div>
                </div>
                <select id="user_id" name="user_id" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary mt-2 hidden" required>
                    <option value="">请选择用户</option>
                    {% for user in all_users %}
                    <option value="{{ user.id }}" data-department="{{ user.department or '' }}" data-position="{{ user.position or '' }}">{{ user.name }} ({{ user.department or '无部门' }})</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="mb-4">
                <label for="role" class="block text-sm font-medium text-gray-700 mb-1">角色</label>
                <select id="role" name="role" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" required>
                    <option value="">请选择角色</option>
                    <option value="项目经理">项目经理</option>
                    <option value="前端开发工程师">前端开发工程师</option>
                    <option value="后端开发工程师">后端开发工程师</option>
                    <option value="产品经理">产品经理</option>
                    <option value="UI/UX设计师">UI/UX设计师</option>
                    <option value="测试工程师">测试工程师</option>
                    <option value="运维工程师">运维工程师</option>
                    <option value="数据分析师">数据分析师</option>
                    <option value="项目成员">项目成员</option>
                    <option value="查看者">查看者</option>
                </select>
            </div>
            
            <div class="mb-4">
                <label for="department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                <input type="text" id="department" name="department" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600" readonly>
            </div>
            
            <div class="mb-4">
                <label for="position" class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                <input type="text" id="position" name="position" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600" readonly>
            </div>
            
            <div class="flex justify-end space-x-2">
                <button type="button" id="cancel-add-member" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition">
                    取消
                </button>
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    添加
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 编辑成员模态框 -->
<div id="edit-member-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden flex items-center justify-center">
    <div class="relative p-5 border w-11/12 md:w-2/3 lg:w-2/5 xl:w-1/3 shadow-lg rounded-md bg-white max-h-[90vh] overflow-y-auto">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑成员</h3>
                <button id="close-edit-member-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="edit-member-form" method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="space-y-4">
                    <!-- 成员名称 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">成员名称</label>
                        <p id="edit-member-name" class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600"></p>
                    </div>
                    
                    <!-- 角色 -->
                    <div>
                        <label for="edit-member-role" class="block text-sm font-medium text-gray-700 mb-1">角色</label>
                        <select 
                            id="edit-member-role" 
                            name="role" 
                            required
                            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm transition-all duration-300"
                        >
                            <option value="项目经理">项目经理</option>
                            <option value="前端开发工程师">前端开发工程师</option>
                            <option value="后端开发工程师">后端开发工程师</option>
                            <option value="产品经理">产品经理</option>
                            <option value="UI/UX设计师">UI/UX设计师</option>
                            <option value="测试工程师">测试工程师</option>
                            <option value="运维工程师">运维工程师</option>
                            <option value="数据分析师">数据分析师</option>
                            <option value="项目成员">项目成员</option>
                            <option value="查看者">查看者</option>
                        </select>
                    </div>
                    
                    <!-- 部门 -->
                    <div>
                        <label for="edit-member-department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                        <input 
                            type="text" 
                            id="edit-member-department" 
                            name="department" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600"
                        >
                    </div>
                    
                    <!-- 职位 -->
                    <div>
                        <label for="edit-member-position" class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                        <input 
                            type="text" 
                            id="edit-member-position" 
                            name="position" 
                            class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600"
                        >
                    </div>
                </div>
                
                <div class="flex justify-end space-x-2 mt-6">
                    <button type="button" id="cancel-edit-member" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        <i class="fas fa-save mr-2"></i>保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 删除成员模态框 -->
<div id="remove-member-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">删除成员</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要删除成员 "<span id="remove-member-name"></span>" 吗？此操作不可撤销。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <form id="remove-member-form" method="post">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="project_id" value="{{ project_id }}">
                    <input type="hidden" name="user_id" id="remove-member-user-id">
                    <input type="hidden" name="role_id" id="remove-member-role-id">
                    <input type="hidden" name="members_page" id="remove-member-page">
                    <button type="button" id="cancel-remove-member" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 mr-2 hover:bg-gray-400">
                        取消
                    </button>
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 hover:bg-red-700">
                        删除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>